<template>
    <div>
        <van-row class="cz-title">
            <van-col span="8">
                <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt=""
                        @click="$router.back(-1)">
            </van-col>
            <van-col span="8" class="text-align-c font-36">我的礼物</van-col>
            <van-col span="8" class="text-align-r">
            </van-col>
        </van-row>
        <div class="tab-name-box">
            <div class="tab-box fl text-align-c font-3" v-for="(item,index) in tabName" :key="index">
                <span @click="active = index,listType(true)" :class="[active == index ? 'active' : '']">{{item}}</span>
            </div>
        </div>
        <ul class="clearfix focus-ul">
            <van-list v-model="loading" :finished="finished" @load="onLoad()">
                <li class="arrayNull" v-if="nullData">暂无数据</li>
                <li class="clearfix" v-for="(item,index) in giftList" :key="index" v-else>
                    <span class="liWu fl">
                        <img class="focusTx border-radius-50" :src="$imgPath(item.user.headImg)" alt="" v-if="item.giftType==1">
                        <img class="focusTx border-radius-50" :src="$imgPath(item.toUser.headImg)" alt="" v-else>
                    </span>
                    <div class="clearfix focus-ul-div fr">
                        <span class="name-age">
                            <em class="fl color-3 font-3 font-bold" v-if="item.giftType==1">{{item.user.nickname}}</em>
                            <em class="fl color-3 font-3 font-bold" v-else>{{item.toUser.nickname}}</em>
                            <em v-if="active == 0" class="font-3 fr color-default">+{{item.gift.price*item.count}}魅力</em>
                            <em v-else class="font-3 fr">-{{item.gift.price*item.count}}钻</em>
                        </span>
                        <span class="name-game-icon zai font-bold font-3">
                            
                        </span>
                        <span class="font-24 color-9">
                            数量：{{item.count}}
                            <em class="fr">{{$time(item.createTime)}}</em>
                        </span>
                    </div>
                </li>               
            </van-list> 
        </ul>
        
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            loading:false,
            finished:false,
            page:-1,
            size:10,
            totalElements:-1,     
            totalPages:0,       
            active:0,
            tabName:['我的收到','我的送出'],
            giftList:[],
            nullData:false          
            // focusId: this.$route.params.focusId
        }
    },
    methods:{        
        //下拉刷新
        onLoad(){    
                if(this.giftList.length == this.totalElements){
                    this.finished = true
                    this.loading = false
                }else{          
                    this.page= this.page+1;
                    this.listType()
                }                   
        },
        listType(init){
            //数据初始化           
            if(init){
                this.totalElements = -1;
                this.giftList=[];
                this.page=-1;     
            }
                
            if(this.active == 0){                
                this.commIn()
            }else{                        
                this.goOut()
            }
        },
        // 我收到的
        commIn(){
            let params = {
                page:this.page,
                size: this.size,
            }
            apiHttp.apiCenter.getGiftUserByToUserId(params,resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.content.length; i++){
                        if(resp.data.content[i].user.headImg==null || resp.data.content[i].user.headImg==''){
                            resp.data.content[i].user.headImg = '/user/head/defaultHeadImage.png';
                        }
                        if(resp.data.content[i].toUser.headImg==null || resp.data.content[i].toUser.headImg==''){
                            resp.data.content[i].toUser.headImg = '/user/head/defaultHeadImage.png';
                        }
                        resp.data.content[i].giftType = 1;
                        this.giftList.push(resp.data.content[i])
                    }
                    this.loading = false;
                    this.totalElements = resp.data.totalElements;  
                    this.totalPages = resp.data.totalPages;
                    if(this.giftList.length==0){
                        this.nullData = true;
                    }else{
                        this.nullData = false;
                    }
                }
            })
        },
        // 我送出的
        goOut(){
            let params = {
                page:this.page,
                size: this.size,
            }
            apiHttp.apiCenter.getGiftUserByFormUserId(params,resp => {
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.content.length; i++){ 
                        if(resp.data.content[i].user.headImg==null || resp.data.content[i].user.headImg==''){
                            resp.data.content[i].user.headImg = '/user/head/defaultHeadImage.png';
                        }
                        if(resp.data.content[i].toUser.headImg==null || resp.data.content[i].toUser.headImg==''){
                            resp.data.content[i].toUser.headImg = '/user/head/defaultHeadImage.png';
                        } 
                        resp.data.content[i].giftType = 2;                      
                        this.giftList.push(resp.data.content[i])
                    }
                     this.loading = false;
                    this.totalElements = resp.data.totalElements;    
                    this.totalPages = resp.data.totalPages;
                    if(this.giftList.length==0){
                        this.nullData = true;
                    }else{
                        this.nullData = false;
                    } 
                }
            })
        }
        
    }
}
</script>
<style scoped>
.cz-title {
    height: 1.36rem;
    line-height: 1.36rem;
    padding: .2rem .6rem .4rem .6rem;
    width: calc(100% - 1.2rem);
}

.icon_return {
    width: .8rem;
    margin-top: .28rem;
}
.tab-name-box{
    height: 2rem;
    width: 100%;
    background-color: #F6F6F6;
    overflow: hidden;
}
.tab-box{
    width: 50%;
    height: 2rem;
}
.tab-box span{
    line-height: 2.2rem;
    height: 1.9rem;
    padding: 0 .5rem;
    display: inline-block;
    border-bottom: transparent .06rem solid;
}
.active{
    border-bottom: #D84E4D .06rem solid !important;
    color: #D84E4D !important;
}
.focus-ul{
    padding: 0 .6rem;
}
.focus-ul li{
    padding: .6rem 0;
}
.focus-ul-div{
    width: calc(98% - 2.8rem);
    padding-top: 0.2rem;
}
.focusTx{
    width: 2.0rem;
    height: 2.0rem; 
    padding: 0.3rem 0; 
}
.focus-ul-div span{
    display: block;
    height: .8rem;
    line-height: .8rem;
}
.name-age{
    height: .8rem;
    line-height: .8rem;
}
.nan-nv{
    margin: .1rem;
    width: .5rem;
    margin-right: .1rem;
}
.name-game-icon{
    height: .8rem;
}
.zai{
    color: #D84E4D;
}
</style>

